<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

<div id="map"></div>
<script type=application/javascript src="../jquery/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8b9836eda980205f3715b02c2fc66dce"></script>
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("map", {
        enableAutoResize:false,
        enableMapClick: false
    }); // 创建Map实例
    map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 3); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    map.disableDragging()
    var center;
    var mouseCenter = null;
    map.addEventListener('mousedown', (type) => {
        center = map.getCenter();
//        mouseCenter.clientX = type.clientX
//        mouseCenter.clientY = type.clientY
        console.log("按下",event)
        event.button=0
        console.log("按下",event)
        if(event.buttons == 2){
            mouseCenter = map.getCenter();
        }
    });
//    map.addEventListener('rightclick', (type) => {
////        center = map.getCenter();
//        mouseCenter = map.getCenter();
////        mouseCenter.clientX = type.clientX
////        mouseCenter.clientY = type.clientY
//        console.log(event)
//    });
    map.addEventListener('mousemove', (type, target, point, pixel, overlay) => {
        if(mouseCenter != null) {
//        console.log(type.clientX + "到" + type.clientY)
//        console.log(event.clientX + "到" + event.clientY)
            let bs = map.getBounds() //获取可视区域
            let bssw = bs.getSouthWest() //可视区域左下角
            let bsne = bs.getNorthEast() //可视区域右上角
            map.setCenter(new BMap.Point((bssw.lng + bsne.lng) / 2.0, type.clientY / 10))
        }
//        $("#map").mouseup()
    });
    map.addEventListener('mouseup', () => {
        let bs = map.getBounds() //获取可视区域
        let bssw = bs.getSouthWest() //可视区域左下角
        let bsne = bs.getNorthEast() //可视区域右上角

        //				console.log("" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat)
        				let center = {}
        				center.lng = (bssw.lng + bsne.lng) / 2.0
        //				if(bsne.lat > 84.6) {
        //					center.lat = (bssw.lat + 84.6) / 2.0
        //				}
        //				if(bssw.lat < -80.8) {
        //					center.lat = (-80.8 + bsne.lat) / 2.0
        //				}
//        center.lat = 39.915
        //				if(center.lat != undefined) {
        //					setTimeout(function() {
        //						console.log(center)
        //						map.panTo(new BMap.Point(center.lng,center.lat)); //两秒后移动到原点
        //					}, 1);
        //				}
//        if(bsne.lat > 84.6 || bssw.lat < -80.8) {
//            setTimeout(function() {
                map.setCenter(new BMap.Point(center.lng, 39.915))
//            }, 10);
//        }
        console.log("释放："+bssw.lat + "到" + bsne.lat)
//      mouseCenter = null
    });
    map.setMapStyle({
        style: 'light'
    });

//    $("#map").mousemove(function(type){
////        console.log(type.clientX + "到" + type.clientY)
//        console.log(type)
//        let bs = map.getBounds() //获取可视区域
//        let bssw = bs.getSouthWest() //可视区域左下角
//        let bsne = bs.getNorthEast() //可视区域右上角
//        map.setCenter(new BMap.Point((bssw.lng + bsne.lng) / 2.0, type.clientY/10))
//    });

</script>
</body>
</html>